<template>
  <view class="float-menu" ref="float" :style="{right: position.right +
'rpx', bottom: position.bottom + 'rpx'}" :class="canDragable && !isMove && 'float-menu-draggable'" @longpress="movestart"
        @touchmove.stop="move" @touchend="moveend">
    <view class="float-menu-container" @click="fold = !fold">
      <image class="btn" mode="widthFix" :src="fold ? foldIcon : unFoldIcon"></image>
      <image
        v-for='(item, index) in menu'
        class="subbtn"
        @click.stop="(e) => item.action(item, e)"
        :src="!item.disabled ? item.icon : item.disableIcon"
        mode="widthFix"
        :style="{top: domain[index].y + 'rpx', left: domain[index].x + 'rpx'}"
      ></image>
    </view>
  </view>
</template>

<script>
  import { range } from 'd3-array'

  export default {
    name: 'b-float-menu',
    props: {
      position: {
        type: Object,
        required: false,
        default: {
          right: 20,
          bottom: 150
        }
      },
      foldIcon: {
        type: String,
        required: true,
        default: 'index'
      },
      unFoldIcon: {
        type: String,
        required: false,
      },
      menu: {
        type: Array,
        required: false,
        default: []
      },
      range: {
        type: Array,
        required: false,
        default: [180, 360]
      },
      radius: {
        type: Number,
        required: false,
        default: 140
      }
    },
    data() {
      return {
        fold: true,
        canDragable: false,
        screen: {
          width: 0,
          height: 0,
        },
        isMove: false,
        style: this.position,
        defaultPosition: [],
        foldPosition: []
      }
    },
    computed: {
      domain: function() {
        return this.fold ? this.defaultPosition : this.foldPosition
      }
    },
    beforeMount() {

      const subMenuRange = range(this.range[0], this.range[1], (this.range[1] - this.range[0]) / this.menu.length)
      this.foldPosition = subMenuRange.map(d => {
        return this.getXY(d, this.radius)
      })

      for (let i = 0; i < this.menu.length; i++) {
        this.defaultPosition.push({
          x: 10,
          y: 10
        })
      }
    },
    mounted() {
      uni.getSystemInfo({
        success: (res) => {
          this.screen = {
            width: res.windowWidth,
            height: res.windowHeight,
          }
        }
      });

      // const line = lineRadial().angle(Math.PI / 2).radius(2);
      // console.log(line.ticks(5))
      // console.log(this.getXY(this.domain[0], 100))
      // console.log(this.getXY(this.domain[1], 100))
    },
    methods: {
      getXY(angle, radius) {
        const { PI, cos, sin} = Math

        return {
          x: sin(angle * PI / 180 ) * radius,
          y: cos(angle * PI / 180 ) * radius
        }

      },
      movestart() {
        this.closeNavbar()
        this.canDragable = true
      },
      move(e) {
        if (this.canDragable && e.touches.length === 1) {
          this.isMove = true
          // 单指拖动
          let touch = e.touches[0];
          let right = this.screen.width - touch.clientX - 34
          let bottom = this.screen.height - touch.clientY - 42
          console.log(right, bottom)
          this.style = {
            right: right >= 10 && right <= (this.screen.width - 78) ? right : (right < 10 ? 10 : (this.screen.width - 78)),
            bottom: bottom >= 0 && bottom <= (this.screen.height - 82) ? bottom : (bottom < 0 ? 0 : (this.screen.height - 82)),
          }
        }
      },
      moveend() {
        this.canDragable = false
        this.isMove = false
        this.style.right = 10
      },
      closeNavbar() {
        // 如果触发其他事件，收起navbar
        if (!this.fold) {
          this.fold = true
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .float-menu-draggable {
    animation: flashing 1s infinite;
  }

  @keyframes flashing {
    0% {
      transform: scale(1)
    }
    50% {
      transform: scale(0.9)
    }
    100% {
      transform: scale(1)
    }
  }

  .float-menu {
    position: fixed;
    z-index: 10;

    .float-menu-container {
      position: relative;

      .btn {
        width: 136rpx;
        height: 136rpx;
      }

      .subbtn {
        position: absolute;
        width: 112rpx;
        height: 113rpx;
        z-index: -1;
        transition: left 0.3s, top 0.3s;
      }

      .top {
        top: -107rpx;
        left: -10rpx;
      }

      .center {
        top: -50rpx;
        left: -104rpx;
      }

      .bottom {
        top: 56rpx;
        left: -104rpx;
      }
    }
  }
</style>
